<template>
  <view>
    <uni-search-bar placeholder="查询分包单位" v-model="searchText" @cancel="mycancel" @confirm="searchName" bgColor="white">
    </uni-search-bar>

    <view class="list">
      <view class="item" v-for="(item,index) in salaryTable" @click="Myselect(item.salaryTableList)">
        <view class="top">
          <uni-icons class="icon" size="18" color="#7E8FAB" type="bars"></uni-icons>
          <text class="text">分包单位</text>
          <text class="affirm" :class="{'affirm-red': !item.isConfirm}">{{item.isConfirm ?"已确认":"待确认"}}</text>
        </view>
        <view class="bottom">
          <view class="money">查看薪资表</view>
          <view class="position">{{item.salaryRelativeUnitName}}</view>
        </view>
      </view>
    </view>

    <!-- aniType动画类型（13种）：fadeInAndScaleUp、slideFromRight、slideFromBottom、newspaper、fall、sideAndFall、flipH3d、flipV3d、sign3d、superScale、slit3d、rotateFromBottom3d、rotateFromLeft3d -->
    <kevy-mask :show="show" @click="hideMask" :contentStyle="contentStyle" :maskClose="true" :z-index="10"
      aniType="fadeInAndScaleUp">
      <view class="showImage" catchtap>
        <image :src="salaryImgUrl.replace('\\','')" mode="" @click="showImage()"></image>
        <button class="mybot" v-if="isMyButoon" @click="myConfirmed">确认</button>
      </view>
    </kevy-mask>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        //显示或隐藏遮罩
        show: false, // 遮罩层组件变量
        //内容最外层样式
        contentStyle: { // 遮罩层组件变量
          'width': '600rpx',
          'height': '400rpx',
          'border-radius': '10rpx',
          'background': '#fff'
        },
        ids: [],
        salaryImgUrl: '/static/images/物业报修.png', //$图片路径
        searchText: '',
        isMyButoon: true, // 是否展示查看薪资表中的确认按钮
        salaryTable: [],
		salaryList:[],
      };
    },
    onLoad() {
      this.salaryTable = uni.getStorageSync('labourSalary')
      console.log('salaryTable', this.salaryTable);
    },

    methods: {
      mycancel() {

      },
      searchName(e) {
        console.log(e);
      },
      showImage() {
		
        uni.previewImage({
          urls: [this.salaryImgUrl.replace('\\', '')]
        })
      },
      // 点击展示覆盖层
      Myselect(val) {
        this.showMask()
        uni.showLoading({
          title: '加载中......'
        })
		this.salaryList=val
        let tampTimelet = '' // 时间
        let subpackName = '' //分包单位名称
        console.log(val);
        for (let i = 0; i < val.length; i++) { //改循环为过滤添加劳工id
          this.ids.push(val[i].id)
          tampTimelet = val[i].salaryDate.replace('年', '-').replace('月', '-') + '-01'
          subpackName = val[i].salaryRelativeUnitName
        }
         console.log('ids', this.ids)
        uni.$post(this.path + '/salary/toPic/' + this.ids.toString(), 
        {
          // DOTO 等待跟后端对接
          time: tampTimelet,
          subpackName: subpackName
        }).then(res => { //获取薪资表接口----参数为劳工id的数组字符串
          if (res.code == 200) {
            uni.hideLoading()
            this.salaryImgUrl = res.data
            this.querenid = id
          } else { 
            uni.hideLoading()
            uni.showToast({
              title: '加载失败,请重试!',
              icon: 'none',
              duration: 1000
            })
            setTimeout(() => {
              uni.hideMask()
            }, 1000)
          }
        })

      },
      myConfirmed() {
		this.salaryList.forEach(item=>{
			item.flag=9
		})
        uni.$put(this.path + '/salary/audit',this.salaryList).then(res => {
          if (res.code == 200) {
            console.log('queren', res);
            uni.showToast({
              title: '确认成功',
              icon: 'none',
              duration: 1000
            })
            this.show = false;
          } else {
            uni.showToast({
              title: '确认失败，请重试',
              icon: 'none',
              duration: 1000
            })
            this.show = false;
          }
        })
      },
      // 下面两个方法是覆盖层的方法
      showMask() {
        this.show = true;
      },
      hideMask() {
        this.show = false;
        return

      },

    },
    onUnload() {
      uni.removeStorageSync('labourSalary')
    },
  }
</script>

<style lang="scss">
  .mybot {
    position: absolute;
    bottom: 30rpx;
    left: 40rpx;
    width: 670rpx;
    background-color: #055DFE;
    font-size: 32rpx;
    font-weight: 400;
    color: white;
  }

  .showImage {
    background-color: #fff;
    padding: 30rpx;
    border-radius: 20rpx;
    width: 100%;
    height: 1212rpx;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    .mybot {
      position: absolute;
      bottom: 30rpx;
      left: 40rpx;
      width: 670rpx;
      background-color: #055DFE;
      font-size: 32rpx;
      font-weight: 400;
      color: white;
    }
  }


  .list {
    display: flex;
    flex-direction: column;
    margin-top: 24rpx;

    .item {
      height: 130rpx;
      background-color: #fff;
      border-radius: 20rpx;
      margin-left: 20rpx;
      margin-bottom: 20rpx;
      margin-right: 20rpx;

      padding: 20rpx;

      .top {
        display: flex;
        align-items: center;
        height: 70rpx;

        .icon {
          margin-left: 20rpx;
        }

        .text {
          padding-left: 10rpx;
          font-size: 26rpx;
          color: #7E8FAB;
        }

        .affirm {
          position: absolute;
          font-size: 28rpx;
          right: 0;
          margin-right: 40rpx;
          color: #bdbdbb;
        }

        .affirm-red {
          color: red;
        }
      }

      .bottom {
        height: 60rpx;
        display: flex;
        align-items: center;

        .money {
          color: #055DFE;
          margin-left: 50rpx;
        }

        .position {
          color: #7E8FAB;
          font-size: 28rpx;
          position: absolute;
          right: 0;
          margin-right: 40rpx;
        }
      }
    }
  }
</style>
